<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>收支明细</title>
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>


<body>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="insert">新建</button>
    </div>
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">×</a>
</script>

<table class="layui-hide" id="financial" lay-filter="financial"></table>

</body>

<script src="../../layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../layuimini/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script>
    var url = '../../FinancialServlet';

    /**
     * 插入数据
     */
    function insertWindow()
    {
        layer.open({
            type: 1,
            closeBtn: false,
            shift: 7,
            shadeClose: true,
            content:
                "<div style='width:350px;height:250px'><div style='width:320px;text-align: left;' class='layui-form-label'><p>请输入货方数目</p><input id='debitC' class='layui-input' type='number' name='debitC' value='0.0'/></div>" +
                "<div style='width:320px;text-align: left;' class='layui-form-label'><p>请输入借方数目</p><input id='lenderC' class='layui-input' type='number' name='lenderC' value='0.0'/></div>"+
                "<div style='text-align: center;margin-top:10%;'><button style='margin-top:10%;' type='button' class='layui-btn' onclick='insertData()'>提交</button></div></div>"
        });
    }
    function insertData()
    {
        var debit = $("#debitC").val();
        var lender = $("#lenderC").val();

        if (debit < 0 || lender < 0)
        {
            layer.msg('请输入大于零的金额', {
                time: 500,
                btn: ['好的']
            });
        }
        else
        {
            $.ajax({
                type: 'post',
                data: {"debit":debit.toString(), "lender":lender.toString(), "type":"ins"},
                dataType: 'json',
                url: url,
                success:function (res)
                {
                    layer.msg("插入成功");
                    location.reload();
                },
                error:function (res)
                {
                    layer.msg("插入失败, 可能是网络问题");
                }
            });
        }
        layer.close();
    }

    /**
     * 显示数据
     */
    layui.use('table', function ()
    {
        var table = layui.table;

        table.render(
            {
                elem: '#financial',
                url: url,
                method: 'post',
                page: true,
                title: '收支明细',
                toolbar: '#toolbar',
                defaultToolbar: [],
                cols: [[
                    {field: 'id', title: '编号', sort: true, fixed: 'left'},
                    {field: 'type', title: '类型'},
                    {field: 'debit_count', title: '借方数目(元)'},
                    {field: 'lender_count', title: '货方数目(元)'},
                    {field: 'count', title: '总计(元)'},
                    {field: 'date', title: '日期', sort: true},
                    {fixed: 'right', title:'操作', toolbar: '#bar', width:80}
                ]]
            }
        )

        // 新建事件
        table.on('toolbar(financial)', function(obj){
            switch(obj.event){
                case 'insert':
                    insertWindow();
                    break;
            };
        });

        // 新建工具事件
        table.on('tool(financial)', function(obj){
            if(obj.event === 'del')
            {
                layer.confirm('确定删除?', function(index){
                    $.ajax({
                        type: 'post',
                        data: {"id":obj.data.id, "type":"del"},
                        dataType: 'json',
                        url: url,
                        success:function (res)
                        {
                            obj.del();
                        },
                        error:function (res)
                        {
                            layer.msg("删除失败, 可能是网络问题")
                        }
                    });

                    layer.close(index);
                });
            }
        });
    });
</script>

</html>